<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap-4.1.3-dist (1)/css/bootstrap.css">
    <script src="./jquery-3.6.0.js"></script>
    <script src="./bootstrap-4.1.3-dist (1)/js/bootstrap.js"></script>
</head>

<style>
    .mynavbar {
        background-color: #242424;
        padding: 0;
        height: 50px;
        line-height: 50px;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 999;
    }

    .navbar-light .navbar-brand:hover,
    .navbar-light .navbar-brand:focus {
        color: #fff;
    }

    .navbar-light .navbar-nav .show>.nav-link,
    .navbar-light .navbar-nav .active>.nav-link,
    .navbar-light .navbar-nav .nav-link.show,
    .navbar-light .navbar-nav .nav-link.active,
    .navbar-light .navbar-nav .nav-link,
    .navbar-light .navbar-brand {
        color: #9d9d9d;
        height: 50px;
        line-height: 50px;
        padding: 0 10px;
    }

    .navbar-light .navbar-nav .nav-link:hover,
    .navbar-light .navbar-nav .nav-link:focus {
        color: #fff;
        background-color: #000;
    }

    .navbar-light .navbar-nav .nav-link {
        background-color: #242424;
        z-index: 999 !important;
    }

    .mynavbar button {
        background-color: #9d9d9d;
    }

    .mynavbar button:focus {
        outline: none;
    }

    /* 下拉菜单 */
    .dropdown-menu {
        padding: 0;
    }

    .dropdown-menu .dropdown-item {
        height: 30px;
        line-height: 30px;
    }

    /* 轮播图 */
    .banner-box {
        height: 500px;
        overflow: hidden;
        margin-top: 50px;
    }

    .banner-box img {
        height: 1000px;

    }

    .carousel-caption {
        position: absolute;
        top: 310px;
        font-size: 14px;
    }

    /* 栅格系统 */
    .row-caption {
        font-size: 14px;
    }

    .row-caption p {
        height: 50px;
    }

</style>

<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light mynavbar">
        <div class="container">
            <a class="navbar-brand" href="#">现代浏览器博物馆</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">综述</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">简述</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            特点
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Chrome</a>
                            <a class="dropdown-item" href="#">Firefox</a>
                            <a class="dropdown-item" href="#">IE</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">关于</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>


    <!-- 轮播图 -->
    <div id="carouselExampleIndicators" class="carousel slide banner-box" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="./images/chrome-big.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Chrome</h5>
                    <p>Google Chrome是一款快速、简单且安全的网络浏览器,能很好地满足新型网站对浏览器的要求。</p>
                    <button class='btn btn-primary'>现在下载</button>
                </div>
            </div>
            <div class="carousel-item">
                <img src="./images/firefox-big.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>firefox</h5>
                    <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”（正式缩写为 Fx，非正式缩写为...</p>
                    <button class="btn btn-info">现在下载</button>
                </div>
            </div>
            <div class="carousel-item">
                <img src="./images/ie-big.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>IE</h5>
                    <p>Internet Explorer8，简称IE8。IE8是为全世界所广泛使用的IE浏览器系列的最新版本....</p>
                    <button class='btn btn-primary'>现在下载</button>
                </div>
            </div>
            <div class="carousel-item">
                <img src="./images/safari-big.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Safari</h5>
                    <p>Safari 浏览器风驰电掣。数据密不透风。</p>
                    <button class='btn btn-primary'>现在下载</button>
                </div>
            </div>
            <div class="carousel-item">
                <img src="./images/opera-big.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Opera</h5>
                    <p>We’re building the best teams, to build an audience of dedicated users, by building the best
                        online experiences.</p>
                    <button class='btn btn-primary'>现在下载</button>
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    <!-- 栅格系统 -->
    <div class="container mt-5">
        <div class="row">
            <div class="col-sm-12 mt-5 col-lg-4 text-center">
                <img src="./images/chrome-logo-small.jpg" class="col-sm-6" alt="">
                <div class="row-caption mt-3 d-none d-md-block">
                    <h5>Chrome</h5>
                    <p>Google Chrome是一款快速、简单且安全的网络浏览器,能很好地满足新型网站对浏览器的要求。</p>
                    <button class='btn btn-primary'>现在下载</button>
                </div>
            </div>
            <div class="col-sm-12 mt-5 col-lg-4 text-center">
                <img src="./images/firefox-logo-small.jpg" class="col-sm-6" alt="">
                <div class="row-caption mt-3 d-none d-md-block">
                    <h5>firefox</h5>
                    <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”（正式缩写为 Fx，非正式缩写为...</p>
                    <button class="btn btn-info">现在下载</button>
                </div>
            </div>
            <div class="col-sm-12 mt-5 col-lg-4 text-center">
                <img src="./images/opera-logo-small.jpg" class="col-sm-6" alt="">
                <div class="row-caption mt-3 d-none d-md-block">
                    <h5>Opera</h5>
                    <p>We’re building the best teams, to build an audience of dedicated users, by building the best
                        online experiences.</p>
                    <button class='btn btn-primary'>现在下载</button>
                </div>
            </div>
            <div class="col-sm-12 mt-5 d-md-block d-lg-none text-center">
                <img src="./images/safari-logo-small.jpg" class="col-sm-6" alt="">
                <div class="row-caption mt-3 d-none d-md-block">
                    <h5>Safari</h5>
                    <p>Safari 浏览器风驰电掣。数据密不透风。</p>
                    <button class='btn btn-primary'>现在下载</button>
                </div>
            </div>
            <div class="col-sm-12 mt-5 d-md-block d-lg-none text-center">
                <img src="./images/ie-logo-small.jpg" class="col-sm-6" alt="">
                <div class="row-caption mt-3  d-none d-md-block">
                    <h5>IE</h5>
                    <p>Internet Explorer8，简称IE8。IE8是为全世界所广泛使用的IE浏览器系列的最新版本....</p>
                    <button class='btn btn-primary'>现在下载</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 滑动门 -->
    <div class="container mt-5">
        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-chrome" role="tab"
                    aria-controls="nav-home" aria-selected="true">Chrome</a>
                <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-firefox" role="tab"
                    aria-controls="nav-profile" aria-selected="false">Firefox</a>
                <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-ie" role="tab"
                    aria-controls="nav-contact" aria-selected="false">IE</a>
                <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-safari" role="tab"
                    aria-controls="nav-contact" aria-selected="false">Safari</a>
                <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-opera" role="tab"
                    aria-controls="nav-contact" aria-selected="false">Opera</a>
            </div>
        </nav>
        <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane mt-5 fade show active" id="nav-chrome" role="tabpanel" aria-labelledby="nav-home-tab">
                <div class="col-lg-8 float-left">
                    <h5>Chrome</h5>
                    <p>Google Chrome是一款快速、简单且安全的网络浏览器,能很好地满足新型网站对浏览器的要求。</p>
                    <button class='btn btn-primary'>现在下载</button>
                </div>
                <img src="./images/chrome-logo.jpg" class="col-lg-4 float-left" alt="">
            </div>
            <div class="tab-pane mt-5 fade" id="nav-firefox" role="tabpanel" aria-labelledby="nav-profile-tab">
                <img src="./images/firefox-logo.jpg" class="col-lg-4 col-md-9 float-left" alt="">
                <div class="col-md-12 col-lg-8 d-md-block float-left">
                    <h5>Firefox</h5>
                    <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”（正式缩写为 Fx，非正式缩写为...</p>
                    <button class='btn btn-primary'>现在下载</button>
                </div>
            </div>
            <div class="tab-pane mt-5 fade" id="nav-ie" role="tabpanel" aria-labelledby="nav-contact-tab">
                <div class="float-left col-md-12 col-lg-8 d-md-block">
                    <h5>IE</h5>
                    <p>Internet Explorer8，简称IE8。IE8是为全世界所广泛使用的IE浏览器系列的最新版本....</p>
                    <button class='btn btn-primary'>现在下载</button>
                </div>
                <img src="./images/ie-logo.jpg" class="col-lg-4 col-md-9 float-left" alt="">
            </div>
            <div class="tab-pane mt-5 fade" id="nav-safari" role="tabpanel" aria-labelledby="nav-contact-tab">
                <img src="./images/safari-logo.jpg" class="col-lg-4 col-md-9 float-left" alt="">
                <div class="float-left col-md-12 col-lg-8 d-md-block">
                    <h5>Safari</h5>
                    <p>Safari 浏览器风驰电掣。数据密不透风。</p>
                    <button class='btn btn-primary'>现在下载</button>
                </div>
            </div>
            <div class="tab-pane mt-5 fade" id="nav-opera" role="tabpanel" aria-labelledby="nav-contact-tab">
                <div class="float-left col-md-12 col-lg-8 d-md-block">
                    <h5>Opera</h5>
                    <p>We’re building the best teams, to build an audience of dedicated users, by building the best
                        online experiences.</p>
                    <button class='btn btn-primary'>现在下载</button>
                </div>
                <img src="./images/opera-logo.jpg" class="col-lg-4 col-md-9 float-left" alt="">
            </div>
        </div>
    </div>
</body>

</html>